<template>
    <view>
        <uv-tabs :list="tabs" fontSize="16" :activeStyle="{ color: themeColor }" :lineColor="themeColor" :scrollable="true"
            :current="curTab" @change="onTabChange">
            <template #right>
                <view class="pl-2" @tap="nextTab">
                    <uv-icon name="arrow-right" size="21" bold></uv-icon>
                </view>
            </template>
        </uv-tabs>
        <view class="flex justify-between my-2">
            <view class="text-center px-4" @tap="toList([0])">
                <view class="text-theme flex justify-center badge-box">
                    <uv-icon size="40" color="inhreit" name="empty-history"></uv-icon>
                    <uv-badge absolute :value="computeBadge([0])" :offset="[0, 2]"></uv-badge>
                </view>
                <view>待支付</view>
            </view>
            <view class="text-center px-4" @tap="toList([1, 4])">
                <view class="text-theme flex justify-center badge-box">
                    <uv-icon size="40" color="inhreit" name="file-text"></uv-icon>
                    <uv-badge absolute :value="computeBadge([1, 4])" :offset="[0, 2]"></uv-badge>
                </view>
                <view>已付款</view>
            </view>
            <view class="text-center px-4" @tap="toList([5])">
                <view class="text-theme flex justify-center badge-box">
                    <uv-icon size="40" color="inhreit" name="order"></uv-icon>
                    <uv-badge absolute :value="computeBadge([5])" :offset="[0, 2]"></uv-badge>
                </view>
                <view>已完成</view>
            </view>
            <view class="text-center px-4" @tap="toList([2, 3])">
                <view class="text-theme flex justify-center badge-box">
                    <uv-icon size="40" color="inhreit" name="empty-list"></uv-icon>
                    <uv-badge absolute :value="computeBadge([2, 3])" :offset="[0, 2]"></uv-badge>
                </view>
                <view>已失效</view>
            </view>
        </view>
        <view v-if="curTab == 3" class="mt-3">
            <uv-button shape="circle" type="warning" @click="toCreateBiz">新增业务</uv-button>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, defineExpose, defineProps } from 'vue'
import { userBadgeSummary } from '@/services/order'
import { enumOptions } from '@/services/platform';
import { themeColor } from '@/utils/index';



const source = ref([])

const tabs = ref([])

const curTab = ref(0)

const computeBadge = computed(() => {
    return (keyArray: Array<number>) => {

        return keyArray.reduce((p, n) => {
            const right = source.value.find(pp => pp.key == n)?.count || 0
            return p + right;
        }, 0)
    }
})

onMounted(() => {
    enumOptions('orderType').then(data => {
        tabs.value = data
        getData()
    }).catch(() => {
    })

})

const nextTab = () => {
    let tabVal = curTab.value
    tabVal += 1
    if (tabVal > tabs.value.length - 1) {
        tabVal = 0
    }
    onTabChange({ index: tabVal, id: tabs.value[tabVal].id })
}

const onTabChange = ({ index, id }) => {
    curTab.value = index
    getData()
}

const toCreateBiz = () => {
    uni.navigateTo({
        url: '/pagesOrder/create/biz'
    })
}

const toList = (statusArray) => {
    uni.navigateTo({
        url: `/pagesOrder/list/list?${statusArray.map(p => `status=${p}`).join('&')}&type=${tabs.value[curTab.value].id}`
    })
}

const getData = () => {
    userBadgeSummary(tabs.value[curTab.value].id).then(data => {
        source.value = data
    }).catch(() => {

    })
}

defineExpose({ getData })

</script>
<style scoped >
.badge-box {
    position: relative;
}
</style>